<!DOCTYPE html>
<html>
<head>
<title>${ServiceName}</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="${ctx}/system/common/favicon.ico">
<link rel="stylesheet" type="text/css" href="${ctx}/system/common/lib/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/system/designer/css/XbzDesigner.css" />
</head>
<body>
	<div class="XbzDesigner">
		<div class="layui-layout layui-layout-admin XbzDesignerLayout">
			<div class="layui-header">
				<div class="layui-logo">界面设计器</div>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a id="btnImportJson" href="#" class="importJson">导入数据</a>
					</li>
					<li class="layui-nav-item">
						<a id="btnExportJson" href="#" class="exportJson">导出数据</a>
					</li>
					<li class="layui-nav-item">
						<a href="#" class="generateCode">生成代码</a>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:XbzDesigner.preview()" class="previewForm">预览效果</a>
					</li>
				</ul>
			</div>
			<div class="layui-side">
				<div class="layui-side-scroll">
					<div class="layui-tab layui-tab-brief">
						<ul class="layui-tab-title">
							<li class="layui-this">组件</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<div class="components-list">
									<div class="components-title">基础组件</div>
									<div class="components-draggable">
										<div class="components-item" x-tag="input">
											<div class="components-body">单行输入框</div>
										</div>
									</div>
									<div class="components-title">布局组件</div>
									<div class="components-draggable">
										<div class="components-item" x-tag="grid1">
											<div class="components-body">1列栅格</div>
										</div>
										<div class="components-item" x-tag="grid2">
											<div class="components-body">2列栅格</div>
										</div>
										<div class="components-item" x-tag="grid3">
											<div class="components-body">3列栅格</div>
										</div>
										<div class="components-item" x-tag="grid4">
											<div class="components-body">4列栅格</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-body">
				<form class="layui-form layui-form-pane XbzDesignerForm">
					<div class="layui-form XbzDesignerContainer" id="XbzDesignerContainer"></div>
				</form>
			</div>
			<div class="layui-side-right">
				<div class="layui-side-scroll">
					<div class="layui-tab layui-tab-brief">
						<ul class="layui-tab-title">
							<li class="layui-this">字段设置</li>
						</ul>
						<iframe id="XbzDesignerTagSetting" class="XbzDesignerTagSetting"></iframe>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="${ctx}/system/common/lib/layui/layui.js"></script>
	<script type="text/javascript" src="${ctx}/system/common/lib/Sortable/Sortable.js"></script>
	<script type="text/javascript" src="${ctx}/system/designer/XbzDesigner.js"></script>
	<script type="text/javascript">
		XbzDesigner.$(function() {
			XbzDesigner.init();
		});
	</script>
</body>
</html>